<template>
  <div class="welcome">
    <h1>欢迎！</h1>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00024-2893.jpg" alt="图片加载失败"></div>
            <div class="swiper-slide"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=947429617,1860959673&fm=26&gp=0.jpg" alt="图片加载失败"></div>
            <div class="swiper-slide"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2478350582,3338695212&fm=26&gp=0.jpg" alt="图片加载失败"></div>
            <div class="swiper-slide"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1276528563,2955887315&fm=26&gp=0.jpg" alt="图片加载失败"></div>
            <div class="swiper-slide"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3761354198,168863301&fm=26&gp=0.jpg" alt="图片加载失败"></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
  //导入swiper插件
  import "../assets/swiper/swiper-bundle.min.css"
  import Swiper from "../assets/swiper/swiper-bundle.min.js"
  export default {
    mounted() {
      new Swiper('.swiper-container', {
        pagination: {
        el: '.swiper-pagination',
        clickable: true,
        },
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        autoplay: {
        delay: 2000,
        disableOnInteraction: false,
        },
        coverflow: {
            rotate: 50,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows : true
        }
    })
    },
    data() {
      return {
        
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .welcome h1{
    text-align: center;
    margin: 0 auto;
  }
  .swiper-container {
    position: absolute;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    }
  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 400px;
    height: 400px;
  }
  .swiper-slide img {
    display: block;
    width: 400px;
    height: 400px;
  }
</style>
